<template>
    <header class="common-header">
        <div class="header-left" @click="back">
            <svg t="1636616685570" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2419" width="200" height="200"><path d="M677.391515 873.916768c-7.86101 0-15.618586-2.999596-21.617778-8.895354L324.473535 533.721212c-11.998384-11.894949-11.998384-31.340606 0-43.235555L655.670303 159.288889c5.999192-5.999192 13.756768-8.895354 21.617778-8.895354 7.757576 0 15.618586 2.999596 21.617778 8.895354 11.894949 11.894949 11.894949 31.237172 0 43.235555L389.223434 512.103434 698.905859 821.785859c11.894949 11.998384 11.894949 31.340606 0 43.235555-5.895758 5.895758-13.756768 8.895354-21.514344 8.895354z m0 0" fill="#666666" p-id="2420"></path></svg>
        </div>
        <div class="header-mid" >
            <slot name="text"></slot>
        </div>
    </header>
</template>
<script>
export default {
    name:"CommonHeader",
    methods:{
        back(){
            this.$router.go(-1);
        },
    }
}
</script>

<style lang="scss" scoped>
.common-header{
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:0 20px ; 
    box-sizing: border-box;
    border-bottom: 1px solid #f0f0f0;
    background-color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    .header-left{
        svg{
            width: 20px;
            height: 20px;
        }
    }
    .header-mid{
        flex-grow: 1;
        font-size: 16px;
        text-align: center;
        font-weight: bold;
    }
}
</style>